<template>
  <div style="width:180px;">
      <div class="wrap" style="width: 100%;
        position: relative;">
          <div class="left-bar" style="width: 2px;
            height: 40%;
            background-color: #00704E;
            position: absolute;"></div>
          <div class="title" style="color: #fff;
            margin-left: 8px;">每日保障时段</div>
          <div class="cotn" style="display: flex;
            flex-direction: column;
            color: #00704E;
            border-bottom: 2px solid rgba(255, 255, 255, 0.301);
            margin-left: 8px;">
              <div class="top-level" style="display: flex;
                flex-direction: column;">
                  <div style="font-size: 16px;
                    padding-top: 8px;">08:00-10:00</div>
                  <div style="font-size: 12px;
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;">
                      <span>特级保障</span><small style="flex: 1;
                        display: block;
                        height: 8px;
                        border-radius: 4px;
                        background-color: #00704E;
                        margin-left: 8px;"></small>
                  </div>
              </div>
              <div class="center" style="display: flex;
                justify-content: space-between;">
                  <div class="center-left" style="width: 20%;
                    height: auto;
                    display: flex;background: linear-gradient(0deg, rgba(0, 204, 132, 0.39) 62%, rgba(0, 204, 132, 0) 100%);
                    justify-content: center;
                    align-items: center;
                    opacity: .6;">
                      <img class="img" src="../assets/7.png" style="width: 20px;
                        height: 30px;"/>
                  </div>
                  <div class="center-right" style="flex: 1;
                    display: flex;
                    flex-direction: column;">
                      <div class="center-level" style="display: flex;
                        flex-direction: column;
                        font-size: 16px;
                        padding-top: 8px;">
                        <div>10:00-22:00</div>
                        <div style="font-size: 12px;
                            display: flex;
                            justify-content: space-between;
                            align-items: baseline;"> 
                            <span>一级保障</span><small style="flex: 1;
                                height: 8px;
                                border-radius: 4px;
                                background-color: #00704E;
                                margin-left: 8px;"></small>
                        </div>
                      </div>
                      <div class="btm" style="display: flex;
                        justify-content: space-between;">
                          <div class="btm-left" style="width: 25%;
                            height: auto;
                            background: linear-gradient(0deg, rgba(2, 255, 180, 0.39) 62%, rgba(52, 140, 114, 0) 100%);
                            opacity: .6;"></div>
                          <div style="flex: 1;
                            display: flex;
                            padding-top: 8px;
                            flex-direction: column;
                            font-size: 16px;
                            color: #fff;">
                              <div>22:00-08:00</div>
                              <div style="display: flex;
                                justify-content: space-between;
                                align-items: baseline;">
                                  <span style="font-size: 12px;">二级保障</span><small style="flex: 1;
                                    height: 8px;
                                    border-radius: 4px;
                                    background-color: #00CC84;
                                    margin-left: 8px;"></small>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      // imgPath:require('../assets/7.png')
    }
  }
}
</script>

<style>
/*
.wrap{
    width: 100%;
    position: relative;
}
.left-bar{
    width: 2px;
    height: 40%;
    background-color: #00704E;
    position: absolute;
}
.title{
    color: #fff;
    margin-left: 8px;
}
.cotn{
    display: flex;
    flex-direction: column;
    color: #00704E;
    border-bottom: 2px solid rgba(255, 255, 255, 0.301);
    margin-left: 8px;
}
.cotn .top-level{
    display: flex;
    flex-direction: column;
}
.cotn .top-level > div:first-child{
    font-size: 16px;
    padding-top: 8px;
}
.cotn .top-level > div:last-child{
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.cotn .top-level > div small{
    flex: 1;
    display: block;
    height: 8px;
    border-radius: 4px;
    background-color: #00704E;
    margin-left: 8px;
}
.center{
    display: flex;
    justify-content: space-between;
}
.center-left{
    width: 20%;
    height: auto;
    display: flex;
background: linear-gradient(0deg, rgba(0, 204, 132, 0.39) 62%, rgba(0, 204, 132, 0) 100%);
    justify-content: center;
    align-items: center;
    opacity: .6;
}
.center-left .img{
    width: 20px;
    height: 30px;
}
.center-right{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.center-right .center-level{
    display: flex;
    flex-direction: column;
    font-size: 16px;
    padding-top: 8px;
}
.center-right .center-level > div:last-child{
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.center-right .center-level small{
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background-color: #00704E;
    margin-left: 8px;
}
.btm{
    display: flex;
    justify-content: space-between;

}
.btm-left{
    width: 25%;
    height: auto;
    background: linear-gradient(0deg, rgba(2, 255, 180, 0.39) 62%, rgba(52, 140, 114, 0) 100%);
    opacity: .6;
}
.btm > div:last-child{
    flex: 1;
    display: flex;
    padding-top: 8px;
    flex-direction: column;
    font-size: 16px;
    color: #fff;
}
.btm > div > div:last-child{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.btm > div span{
    font-size: 12px;
}
.btm > div small{
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background-color: #00CC84;
    margin-left: 8px;
}*/
</style>